<template>
  <el-container class="container" style="background:#fff">
    <el-header style="padding-top:15px;height:120px">
      <div style="height:40px">
        <el-select
          v-model="workshop"
          filterable
          placeholder="请选择"
          style="margin-right:30px"
          @focus="selectWorkdhop"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="workshop"
          filterable
          placeholder="请选择"
          style="margin-right:30px"
          @focus="selectWorkdhop"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="workshop"
          filterable
          placeholder="请选择"
          style="margin-right:30px"
          @focus="selectWorkdhop"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="workshop"
          filterable
          placeholder="请选择"
          style="margin-right:30px"
          @focus="selectWorkdhop"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="workshop"
          filterable
          placeholder="请选择"
          style="margin-right:30px"
          @focus="selectWorkdhop"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="workshop"
          filterable
          placeholder="请选择"
          style="margin-right:30px"
          @focus="selectWorkdhop"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="workshop"
          filterable
          placeholder="请选择"
          style="margin-right:30px"
          @focus="selectWorkdhop"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div style="margin-top:20px;">
        <el-radio-group v-model="radio" style="width:330px;border-right:2px solid #606266">
          <el-radio :label="1">投产车间</el-radio>
          <el-radio :label="2">当前车间</el-radio>
        </el-radio-group>
        <el-radio-group v-model="radio2" style="margin-left:100px">
          <el-radio :label="3">逻辑工序段&工序段组</el-radio>
          <el-radio :label="4">逻辑工序段</el-radio>
          <el-radio :label="5">工序段组</el-radio>
          <el-radio :label="6">工序段</el-radio>
          <el-radio :label="7">工序</el-radio>
        </el-radio-group>
        <el-button type="primary" size="small" style="float:right;position:absolute;right:32px">确定</el-button>
      </div>
    </el-header>
    <el-main>
      <div style="width:100%;">
        <el-table
          ref="table"
          :data="tableData"
          highlight-current-row
          :height="tableHeight"
          style="overflow: auto;width:100%"
          border
        >
          <el-table-column
            v-for="item in tableHead"
            :key="item.label"
            :label="item.label"
            :property="item.property"
            :width="item.width"
          />
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      radio: 1,
      radio2: 3,
      tableHeight: document.documentElement.clientHeight - 245 + 'px',
      workshop: '',
      time: 30,
      tableData: [],
      tableHead: [],
      options: [
        { label: '一车间', value: '一车间' },
        { label: '二车间', value: '二车间' }
      ],
      total: 0,
      pagesize: 18,
      currentPage: 1,
      mergeSpanArr: [], // 空数组，记录每一行的合并数
      mergeSpanArrIndex: '' // mergeSpanArr的索引
    }
  },
  watch: {
    tableHeight: function (val) {
      this.tableHeight = val - 195 + 'px'
    }
  },
  created () {
    this.info()
  },
  mounted () {
    this.tableHeight = document.documentElement.clientHeight - 245 + 'px'
    const that = this
    window.onresize = () => {
      return () => {
        that.tableHeight = document.documentElement.clientHeight - 245 + 'px'
      }
    }
  },
  methods: {
    info: function () {
      this.tableHead.push(
        { label: '产品', property: 'a0', width: '140' },
        { label: '批号', property: 'a1', width: '140' },
        { label: '批次类型', property: 'a2' },
        { label: '投入量', property: 'a3' },
        { label: '当前量', property: 'a4' },
        { label: '工序段', property: 'a5' },
        { label: '工序', property: 'a6' },
        { label: '进度', property: 'a7' },
        { label: '批次状态', property: 'a8' },
        { label: '上道工序完成时间', property: 'a9' }
      )
      for (var i = 0; i < 10; i++) {
        var row = {}
        row['a0'] = '打蛋机' + i
        row['a1'] = i
        row['a2'] = '正常批'
        row['a3'] = 3000
        row['a4'] = 2000
        row['a5'] = '链注入'
        row['a6'] = '注入'
        row['a7'] = '179/230'
        row['a8'] = '待产'
        row['a9'] = '2020-07-12'
        this.tableData.push(row)
      }
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },
    selectWorkdhop () {},
    selectMonth: function () {
      this.select = true
      var date = new Date().getMonth + 1
      this.time = 500 * 30
      console.log(date)
    },
    selectWeek: function () {
      this.select = false
    },
    openProduct: function () {
      this.drawer = true
    },
    getProduct: function () {},
    selectPart: function (row) {
      this.partTata = []
      this.partTata = row.a5
      this.innerDrawer = true
    }
  }
}
</script>

<style scoped>
.container /deep/ .el-main {
  padding: 0 20px;
}
.container /deep/ .el-icon-search {
  color: red;
  margin-top: 10px;
}
.container {
  color: #606266;
}
.container /deep/ .el-table .cell {
  text-align: center;
}
.container /deep/ .el-radio {
  font-weight: bold;
  color: #606266;
}
.container /deep/ .el-radio span {
  font-size: 16px;
}
.container /deep/ .el-table th {
  background: #b5bdc5;
  color: #fff;
}
</style>
